/**
 * Created by mapbar_front on 2019/8/8.
 */
import React,{Component,PureComponent} from 'react';
import {FixedSizeList as List} from 'react-window';
import Immutable from 'immutable';
const SomeRecord = Immutable.Record({foo:null});
const x = new SomeRecord({ foo:'xiao'});
console.log('x',x);
const y = x.set('foo','tianxia');
const z = x.set('foo','xiao');

console.log('x===y',x===y); //false
console.log('x===z',x===z); //true


const Row = ({index,style})=>(
    <div style={style}>Row{index}</div>
)
class CounterButton extends PureComponent{
    constructor(props){
        super(props);
        this.state = {
            count:1,
        }
    }
    // shouldComponentUpdate(nextProps,nextState){
    //     if(nextState.count !== this.state.count){
    //         return true;
    //     }
    //     if(nextProps.name !== this.props.name){
    //         return true;
    //     }
    //     return false;
    // }

    handleClick=()=>{
        this.setState(state=>({
            count: state.count+1
        }))
    }
    render(){
        return(
            <div>
                <button onClick={ this.handleClick }>
                    CounterButton
                </button>
                <h1>{this.state.count}</h1>
                <h1>{this.props.name}</h1>
            </div>
        )
    }
}
class ListOfWords extends PureComponent{
    render(){
        return(
            <div>
                {this.props.words.join(',')}
            </div>
        )
    }
}
class WordAdder extends Component{
    constructor(props){
        super(props);
        this.state = {
            words:['xiao']
        }
    }
    handleClick=()=>{
        // const words = this.state.words;
        // words.push('xiao');
        // this.setState({
        //     words,
        // },()=>{
        //     console.log(this.state.words);
        // })

        // this.setState(state=>({
        //     words:state.words.concat(['xiao'])
        // }))

        //ES6 扩展运算符
        // this.setState(state=>({
        //     words:[...state.words,'xiao']
        // }))

    }
    render(){
        return(
            <div>
                <button onClick={this.handleClick}>
                    button
                </button>
                <ListOfWords words={this.state.words}/>
            </div>
        )
    }
}
class Performance extends Component{
    render(){
        return(
            <div>
                <WordAdder/>
                <CounterButton name="xiao"/>
                <List
                    height={150}
                    itemCount={1000}
                    itemSize={35}
                    width={300}
                >
                    {Row}
                </List>
            </div>
        )
    }
}

export default Performance;

